import type { MutableRefObject } from 'react';
import { useEffect, useRef, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { toolbar } from './toolbar';

import './editor.css'
// import ImgUpload from '../ossUpload';

export function QuillEditor({ text, emitHandle }) {
    // // 图片上传
    // const [value, setValue] = useState(text);

    // const imageHandler = () => {
    //   document.querySelector('#imgRef')?.click()
    //   console.log(document.querySelector('#quill')?.selection)
    // }

    const modules = toolbar
    // modules.toolbar.handlers = {
    //   image: imageHandler
    // }
    // const getImgUrl = (imgUrl: any) => {
    //   console.log('图片上传地址==', imgUrl)
    //   const imgCode = `<img style="width: 375px;" src="${imgUrl}">`
    //   setValue(value + imgCode)
    // }

    useEffect(() => {
        // console.log('ReactQuill----', text)
        // setValue(text)
        // emitHandle(value)
    }, [text])

    const changeValue = (val: string) => {
        // setValue(val)
        emitHandle(val)
    }

    return (<>
        {/* <ImgUpload id="imgRef" onChange={getImgUrl} /> */}
        <ReactQuill id="quill" theme="snow" modules={modules} value={text} onChange={changeValue} />
    </>);
}